<template>
	<view>
		<view style="margin-top: 10rpx;">
			<u-subsection :list="list" :current="curNow" active-color="#ff9900" bg-color="#ffffff" mode="button" @change="sectionChange"></u-subsection>


			<view>
				<span style="float: left;margin-left: 40rpx;">{{listNames}}</span>
				<u-input v-model="value" :disabled="isInput" type="textArea" :placeholder="placehName" :autoHeight="true" style="float: left;width: 530rpx" />
			</view>
			<view v-show="isShowTel">
				<span style="float: left;margin-left: 40rpx;">中介电话：</span>
				<u-input v-model="tel" :disabled="isInput" type="textArea" placeholder="请输入中介电话" :autoHeight="true" style="float: left;width: 530rpx" />
			</view>
			
			<view style="margin-bottom: 10rpx;">
				<u-button @click="cancel" shape='circle' style="float: left;width: 250rpx;margin-left: 100rpx;margin-top: 40rpx;">取消</u-button>
				<u-button @click="confrim" shape='circle' :custom-style="{'backgroundColor': '#4CD964'}" style="float: left;width: 250rpx;margin-left: 40rpx;margin-top: 40rpx;">确定</u-button>
			</view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '在中介'
					},
					{
						name: '在物业'
					},
					{
						name: '在自己'
					}
				],
				value: '',
				listNames: '中介地址：',
				isInput: false,
				placehName: '请输入中介地址',
				tel: '',
				isShowTel: true,
				curNow: 0
			}
		},
		watch:{
			tel(newValue,oldvalue){
				if(newValue.length > 11){
					wx.showToast({
						title: '电话号码输入不正确',
						icon: 'none',
						duration: 1000
					})
					this.tel = oldvalue
				}	
			}
		},
		methods: {
			cancel() {
				var item = {
					'isShowKey': false,
					'keyPosition': ''
				}
				this.$emit('canlelCon', item)
			},
			confrim() {	
				if (this.value !== '' && this.isShowTel) {
					var reg = /^1([358][0-9]|4[01456879]|6[2567]|7[0135678]|9[012356789])[0-9]{8}$/
					if(!reg.test(this.tel)){
						wx.showToast({
							title: '电话格式错误！',
							icon: 'none',
							duration: 1000
						})
						return
					}
					
					var item = {
						'isShowKey': false,
						'keyPosition': this.listNames + this.value + this.tel
					}
					this.$emit('canlelCon', item)
				} else if(this.value !== '' && !this.isShowTel){
					var item = {
						'isShowKey': false,
						'keyPosition': this.listNames + this.value
					}
					this.$emit('canlelCon', item)
				}else {
					wx.showToast({
						title: '请输入中介地址和电话',
						icon: 'none',
						duration: 1000
					})
				}
			},
			sectionChange(index) {
				this.curNow = index;
				if (this.curNow == 0) {
					this.isInput = false
					this.value = ''
					this.isShowTel = true
					this.listNames = '中介地址：'
				} else if (this.curNow == 1) {
					this.isInput = true
					this.isShowTel = false
					this.listNames = '物业地址：'
					this.value = '在小区物业处'
				} else if (this.curNow == 2) {
					this.isInput = true
					this.isShowTel = false
					this.listNames = '自己处：'
					this.value = '在自己手中'
				}
			}
		},
	}
</script>

<style>
</style>
